// src/hooks/useEcharts.js (改进版)
import { onUnmounted } from 'vue'
import * as echarts from 'echarts'
// 引入词云扩展（需在初始化图表前引入，自动注册词云类型）
import 'echarts-wordcloud';
/**
 * ECharts 图表 Hook
 * @param {Object} options - 图表配置选项
 * @param {Object} opts - 其他配置选项
 * @returns {Object} 包含图表相关方法的对象
 */
export function useEcharts(options, opts = {}) {
    // 图表实例集合（支持多个图表）
    const chartInstances = new Map()

    // resize 事件处理器集合
    const resizeHandlers = new Map()

    // 默认配置
    const defaultOpts = {
        theme: 'null',
        autoResize: true,
        ...opts
    }

    // 初始化图表
    const initChart = (el, initialOptions, mapData) => {
        if (!el) return null

        // 如果该元素已有实例，先销毁
        if (chartInstances.has(el)) {
            disposeChart(el)
        }

        try {
            // 创建新的图表实例
            const chartInstance = echarts.init(el, defaultOpts.theme)

            // 注册地图数据（如果提供）
            if (mapData) {
                echarts.registerMap('china', mapData)
            }

            // 设置图表配置
            const chartOptions = initialOptions || options
            if (chartOptions) {
                chartInstance.setOption(chartOptions)
            }

            // 存储实例
            chartInstances.set(el, chartInstance)

            // 自动调整大小
            if (defaultOpts.autoResize) {
                const resizeHandler = () => {
                    if (chartInstance && !chartInstance.isDisposed()) {
                        chartInstance.resize()
                    }
                }

                // 存储 resize 处理器
                resizeHandlers.set(el, resizeHandler)
                window.addEventListener('resize', resizeHandler)
            }

            return chartInstance
        } catch (error) {
            console.error('ECharts 初始化失败:', error)
            return null
        }
    }

    // 更新图表配置
    const setOptions = (el, newOptions, notMerge = true) => {
        const chartInstance = chartInstances.get(el)
        if (!chartInstance || chartInstance.isDisposed()) return

        try {
            chartInstance.setOption(newOptions, notMerge)
        } catch (error) {
            console.error('ECharts 配置更新失败:', error)
        }
    }

    // 更新部分配置（合并）
    const updateOptions = (el, newOptions) => {
        setOptions(el, newOptions, false)
    }

    // 调整特定图表大小
    const resizeChart = (el) => {
        const chartInstance = chartInstances.get(el)
        if (chartInstance && !chartInstance.isDisposed()) {
            chartInstance.resize()
        }
    }

    // 获取图表实例
    const getEchartsInstance = (el) => {
        return chartInstances.get(el) || null
    }

    // 销毁特定图表
    const disposeChart = (el) => {
        const chartInstance = chartInstances.get(el)
        if (chartInstance && !chartInstance.isDisposed()) {
            try {
                chartInstance.dispose()
            } catch (error) {
                console.warn('ECharts 销毁失败:', error)
            }
        }

        // 移除 resize 事件监听器
        const resizeHandler = resizeHandlers.get(el)
        if (resizeHandler) {
            window.removeEventListener('resize', resizeHandler)
            resizeHandlers.delete(el)
        }

        // 从集合中移除
        chartInstances.delete(el)
    }

    // 销毁所有图表
    const disposeAll = () => {
        // 清理所有 resize 事件监听器
        resizeHandlers.forEach((handler) => {
            window.removeEventListener('resize', handler)
        })
        resizeHandlers.clear()

        // 销毁所有图表实例
        chartInstances.forEach((instance) => {
            if (instance && !instance.isDisposed()) {
                try {
                    instance.dispose()
                } catch (error) {
                    console.warn('ECharts 销毁失败:', error)
                }
            }
        })
        chartInstances.clear()
    }

    // 组件卸载时清理所有资源
    onUnmounted(() => {
        disposeAll()
    })

    return {
        initChart,
        setOptions,
        updateOptions,
        resizeChart,
        getEchartsInstance,
        disposeChart,
        disposeAll
    }
}
